<script setup lang="ts" name="BasicTableForm">
const props = withDefaults(
	defineProps<{
		formList: BasicTableNameSpace.FormItemType[];
	}>(),
	{
		formList: () => [],
	},
);

const emits = defineEmits(['search']);

const dataForm: Record<string, any> = reactive({});

watch(
	() => props.formList,
	(val, old) => {
		val.forEach((item, index) => {
			if (item.defaultValue !== old[index].defaultValue) {
				dataForm[item.key] = item.defaultValue;
				if (
					Object.prototype.hasOwnProperty.call(item, 'subKey') &&
					item.subKey
				) {
					dataForm[item.subKey] = item.defaultSubValue;
				}
			}
		});
	},
);

init();
function init() {
	props.formList.forEach((item) => {
		dataForm[item.key] =
			item.defaultValue !== undefined ? item.defaultValue : '';
		if (Object.prototype.hasOwnProperty.call(item, 'subKey') && item.subKey) {
			dataForm[item.subKey] =
				item.defaultSubValue !== undefined ? item.defaultSubValue : '';
		}
	});
}

const showLabel = computed(
	() => (item: BasicTableNameSpace.FormItemType) =>
		Object.prototype.hasOwnProperty.call(item, 'showLabel') && !item.showLabel,
);

const BasicTableFormRef = shallowRef();

function reset() {
	BasicTableFormRef.value.resetFields();
	props.formList.forEach((item) => {
		if (Object.prototype.hasOwnProperty.call(item, 'subKey') && item.subKey) {
			dataForm[item.subKey] = '';
		}
	});
	emits('search', dataForm);
}
defineExpose({
	reset,
});

// 自动填充select事件监听
function autocompleteSelect(
	value: any,
	item: BasicTableNameSpace.FormItemType,
) {
	if (Object.prototype.hasOwnProperty.call(item, 'subKey') && item.subKey) {
		dataForm[item.subKey] = value.id;
	}
	if (item.autocompleteSelect) item.autocompleteSelect(value);
}

// 自动填充change事件监听
function autocompleteChange(
	_: string | number,
	item: BasicTableNameSpace.FormItemType,
) {
	dataForm[item.key] = '';
	if (Object.prototype.hasOwnProperty.call(item, 'subKey') && item.subKey) {
		dataForm[item.subKey] = '';
	}
}
</script>

<template>
	<el-form
		ref="BasicTableFormRef"
		:model="dataForm"
		class="flex"
		@submit.prevent
	>
		<div
			class="basic-table-form-left flex-1 flex flex-wrap mr-14 overflow-hidden"
		>
			<el-form-item
				v-for="item in formList"
				:key="item.key"
				:label-width="item.labelWidth"
				:class="[showLabel(item) ? 'hide-label' : '']"
				:style="{
					'--el-form-inline-content-width': (item.inputWidth || 200) + 'px',
				}"
				:prop="item.key"
				:required="item.required"
			>
				<template #label v-if="!item.custom">
					<text class="text-666 text-sm">{{ item.label }}</text>
				</template>
				<template v-if="item.custom">
					<slot :name="item.key" :item="item" :dataForm="dataForm"></slot>
				</template>
				<template v-else-if="item.type === 'input-text'">
					<el-input
						v-model="dataForm[item.key]"
						type="text"
						:maxlength="item.maxlength"
						:clearable="item.clearable"
						:disabled="item.disabled"
						:readonly="item.readonly"
						:placeholder="item.placeholder"
					>
						<template #suffix>
							<el-icon><component :is="item.suffixIcon" /></el-icon>
						</template>
					</el-input>
				</template>
				<template v-else-if="item.type === 'input-password'">
					<el-input
						v-model="dataForm[item.key]"
						type="password"
						:maxlength="item.maxlength"
						:clearable="item.clearable"
						:disabled="item.disabled"
						:readonly="item.readonly"
						:placeholder="item.placeholder"
					/>
				</template>
				<template v-else-if="item.type === 'input-number'">
					<el-input
						v-model="dataForm[item.key]"
						type="number"
						:maxlength="item.maxlength"
						:clearable="item.clearable"
						:disabled="item.disabled"
						:readonly="item.readonly"
						:placeholder="item.placeholder"
					/>
				</template>
				<template v-else-if="item.type === 'select'">
					<el-select
						v-model="dataForm[item.key]"
						:disabled="item.disabled"
						:clearable="item.clearable"
						:multiple="item.multiple"
						:readonly="item.readonly"
						:placeholder="item.placeholder"
						:filterable="item.filterable"
						:collapse-tags="item.collapseTags"
					>
						<el-option
							v-for="option in item.options"
							:key="option.value"
							:label="option.label"
							:value="option.value"
						/>
					</el-select>
				</template>
				<template v-else-if="item.type === 'date'">
					<el-date-picker
						v-model="dataForm[item.key]"
						type="date"
						:disabled="item.disabled"
						:clearable="item.clearable"
						:readonly="item.readonly"
						:placeholder="item.placeholder"
						:value-format="item.valueFormate || 'YYYY-MM-DD'"
					/>
				</template>
				<template v-else-if="item.type === 'daterange'">
					<el-date-picker
						v-model="dataForm[item.key]"
						type="daterange"
						:disabled="item.disabled"
						:clearable="item.clearable"
						:readonly="item.readonly"
						:start-placeholder="item.startPlaceholder"
						:end-placeholder="item.endPlaceholder"
						:value-format="item.valueFormate || 'YYYY-MM-DD'"
					/>
				</template>
				<template v-else-if="item.type === 'datetimerange'">
					<el-date-picker
						v-model="dataForm[item.key]"
						type="datetimerange"
						:disabled="item.disabled"
						:clearable="item.clearable"
						:readonly="item.readonly"
						:start-placeholder="item.startPlaceholder"
						:end-placeholder="item.endPlaceholder"
						:value-format="item.valueFormate || 'YYYY-MM-DD HH:mm:ss'"
					/>
				</template>
				<template v-else-if="item.type === 'autocomplete'">
					<el-autocomplete
						v-model="dataForm[item.key]"
						clearable
						:placeholder="item.placeholder"
						:fetch-suggestions="item.querySearch"
						@select="autocompleteSelect($event, item)"
						@change="autocompleteChange($event, item)"
					/>
				</template>
			</el-form-item>
		</div>
		<div class="shrink-0">
			<el-button
				type="primary"
				class="search-btn w-20 h-8"
				@click="emits('search', dataForm)"
			>
				搜索
			</el-button>
			<el-button class="reset-btn w-20 h-8 border-[#ddd] mr-1" @click="reset"
				>重置</el-button
			>
			<slot name="menu"></slot>
		</div>
	</el-form>
</template>

<style lang="scss" scoped>
.basic-table-form-left {
	--font-size: 13px;
	gap: 12px 20px;

	.hide-label {
		:deep(.el-form-item__label) {
			display: none;
		}
	}

	:deep(.el-form-item:last-of-type) {
		margin-bottom: 0;
	}

	:deep(.el-form-item--default) {
		margin-bottom: 0;
		.el-form-item__content {
			width: var(--el-form-inline-content-width);
		}
		.el-input__wrapper {
			border-radius: 3px;
			border: 1px solid #dddddd;
			box-shadow: none;

			.el-input__inner::placeholder {
				color: #999;
			}
		}
	}
}
</style>
